<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  <%@page import="org.springframework.security.core.context.SecurityContextHolder"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Client Profile</title>
<link rel="stylesheet" type="text/css" href="css/style-old.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/jspdf/jspdf.js"></script>
<script type="text/javascript" src="js/jspdf/jspdf.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/niceforms-default.css" />


<script type="text/javascript">
ddaccordion.init({
	headerclass: "submenuheader",
	contentclass: "submenu", 
	revealtype: "click", 
	mouseoverdelay: 200, 
	collapseprev: true,
	defaultexpanded: [], 
	onemustopen: false,
	animatedefault: false,
	persiststate: true,
	toggleclass: ["", ""], 
	togglehtml: ["suffix", "<img src='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"],
	animatespeed: "fast", 
	oninit:function(headers, expandedindices){ 
	},
	onopenclose:function(header, index, state, isuseractivated){ 
	}
})


function excel() {
	window.open('data:application/vnd.ms-excel,' +encodeURIComponent( $('#tbl').html()));
	e.preventDefault();
	}

	
	$(document).ready(function() {
		$.ajax({
			url : '/nepalcmx/mock/brok',
			success : function(jsonData) {
			
				var jsonObj = JSON.parse(jsonData);
				document.getElementById("range").innerHTML = jsonObj.range;
				document.getElementById("sym").innerHTML = jsonObj.sym;
				document.getElementById("btype").innerHTML = jsonObj.btype;
				document.getElementById("method").innerHTML = jsonObj.method;
				document.getElementById("fixb").innerHTML = jsonObj.fixb;
				document.getElementById("min").innerHTML = jsonObj.min;
				document.getElementById("expb").innerHTML = jsonObj.expb;
				document.getElementById("sidef").innerHTML = jsonObj.sidef;	
			}
		});
		
/* 	//alert("0");
		var doc = new jsPDF('landscape');
		//alert("1");

	    var specialElementHandlers = {
	      '#editor': function(element, renderer){
	       return true;
	    }
	    };


	    $('#pdf').click(function(){
	    //	alert("2");
	    	var html=$("#tbl").html();
	    	//alert("3"); 
	    	doc.fromHTML(html,5,5, {
	            'width': 1000,
	            'elementHandlers': specialElementHandlers
	         });
	    //	alert("4");
	      doc.save("Brokerage.pdf");
	     // alert("5");
	    });  */
	    
	    
	    
		$('#pdf').click(function(){
			 var table1 = 
			        tableToJson($('#dataTable').get(0)),
			        cellWidth = 52,
			        rowCount = 0,
			        cellContents,
			        leftMargin = 2,
			        topMargin = 35,
			        topMarginTable = 55,
			        headerRowHeight = 19,
			        rowHeight = 15,

			         l = {
			         orientation: 'l',
			         unit: 'mm',
			         format: 'a3',
			         compress: true,
			         fontSize: 14,
			         lineHeight: 1,
			         autoSize: false,
			         printHeaders: true
			     };

			    var doc = new jsPDF(l, '', '', '');
			    doc.setFontSize(20);
			    doc.setFont("times");
			    doc.setFontType("bold");
			    
			    doc.text("Brokerage Detail",190,20);

			    doc.setProperties({
			        title: 'Brokerage',
			        subject: 'Brokerage Detail',
			        author: 'NCMEX',
			        keywords: 'generated, javascript, web 2.0, ajax',
			        creator: 'NCMEX'
			    });

			    doc.cellInitialize();

			   $.each(table1, function (i, row)
			    {

			        rowCount++;

			        $.each(row, function (j, cellContent) {

			            if (rowCount == 1) {
			                doc.margins = 1;
			                doc.setFont("helvetica");
			                doc.setFontType("bold");
			                doc.setFontSize(14);

			                doc.cell(leftMargin, topMargin, cellWidth, headerRowHeight, cellContent, i)
			            }
			            else {
			                doc.margins = 1;
			                doc.setFont("times");
			                doc.setFontType("italic");  // or for normal font type use ------ doc.setFontType("normal");
			                doc.setFontSize(12);                    

			                doc.cell(leftMargin, topMargin, cellWidth, rowHeight, cellContent, i); 
			            }
			           
			        })
			    })

			doc.save('Brokerage.pdf'); 
		    });  
	});
	
	




function tableToJson(table) {
var data = [];

// first row needs to be headers
var headers = [];
 for (var i=0; i<table.rows[0].cells.length; i++) {
	
    headers[i] = table.rows[0].cells[i].innerHTML;
} 

 data.push(headers);
for (var i=1; i<table.rows.length; i++) {

    var tableRow = table.rows[i];
    var rowData = {};

    for (var j=0; j<tableRow.cells.length; j++) {

        rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

    }

    data.push(rowData);
}       

return data; 
}


	


function prof()
{
if (container1.style.display=="none") container1.style.display="block"; 
else container1.style.display="block";
}

function logout(){
alert("You are Logout SuccessFully");
}

	
</script>
</head>
<body>
  <%@ include file="header.jsp" %>	
    <div class="main_content">
    
                    <div class="menu">
                    <ul>
                    <li>LoginID : <sec:authentication property="principal.username" /></li>
                    <li><a href="#">Exchange :
                       <select style="height:15px;font-size:9px;"><option>NMCEX</option></select></a>
                  
                    </li>
                    <li><a href="#">Login Type : Client</a></li>
                    <li><a href="#">Segment : <select style="height:16px;font-size:9px;"><option>commodity mkt(13-14)</option></select>
                    </a>
                       
                    </li>
                  
                    </ul>
                    </div> 
                    
                    
                    
                    
    <div class="center_content">  
    
    
    
    <div class="left_content">
    
    		<div class="sidebar_search">
            <form>
            <input type="text" name="" class="search_input" value="search keyword" onclick="this.value=''" />
            <input type="image" class="search_submit" src="images/search.png" />
            </form>            
            </div>
    
            <div class="sidebarmenu">
            
                <a class="menuitem submenuheader" href="">Profile</a>
                <div class="submenu">
                    <ul>
                    <li onclick="prof('container1');"><a href="clientpage">Directory</a></li>
               
                    </ul>
                </div>
                <a class="menuitem submenuheader" href="" >Financial</a>
                <div class="submenu">
                    <ul>
                    <li><a href="drcr">Dr./Cr. Summary</a></li>
                    <li><a href="fenlgr">Financial Ledger</a></li>
                    <!-- <li><a href='agingreport'>Ageing</a></li> -->
                    
                    </ul>
                </div>
                <a class="menuitem submenuheader" href="">Reports</a>
                <div class="submenu">
                    <ul>
                      <li><a href="tradeconf">Trade Conf.</a></li>
                   
                    <li><a href="netpos">N.Pos(As on)</a></li>
                   
                    <li><a href="clientport">PortFolio</a></li>
                    <li><a href="bills">Bills</a></li>
                   
                   
                    </ul>
                </div>
                <a class="menuitem submenuheader" href="">Downloads</a>
                 <div class="submenu">
                    <ul>
                    <li><a href="pdf/oct_hn.pdf">Downloads</a></li>
                    <li><a href="pdf/TB_Trading_Regulations.pdf">Reports</a></li>
                    <li><a href="csv/test5.csv">Digital</a></li>
                     </ul>
                </div>
                <a class="menuitem submenuheader" href="">Request</a>
                 <div class="submenu">
                    <ul>
                    <li ><a href="withdrawal">WithDrawal Request</a></li>
                <li ><a href="clientfundview">Client Fund View</a></li>
                <li ><a href="fundTransfer">Fund Transfer</a></li>
                    </ul>
                </div>
                <a class="menuitem submenuheader" href="">Admin Panel</a>
                 <div class="submenu">
                    <ul>
                   <li ><a href="nepalholiday">Nepal Holiday List</a></li>
                    </ul>
                </div>
               <a class="menuitem submenuheader" href="">Settings</a>
                 <div class="submenu">
                    <ul>
                    <li ><a href="changepwd">Password Change</a></li>
                    <li ><a href="transactionpwd">Transaction Password Change</a></li>
                    </ul>
                </div>
                    
            </div>
            
            
    
    </div>  
      <div id="container1" class="right_content" >            
<div style="border-style:groove; border-width:0px;">
<label style=" border-style:groove; border-width:0px;width:100%;font-size:14px;" ><font color="#663380"><b><i>Client Name : <sec:authentication property="principal.username" /></i></b></font> </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label style="border-style:groove; border-width:0px; width:100%;font-size:14px;" ><font color="#663380"><b><i>Brokerage</i></b></font></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label style="border-style:groove; border-width:0px; width:100%;" ><a href="#" onclick="excel()"><input type="image" src="img/excel_icon.png" style="width:20px; height:20px;" /></a></label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<label style="border-style:groove; border-width:0px; width:100%;" ><a href="#" id="pdf"><input type="image" src='img/pdf_icon.png' style="width:20px; height:20px;"  /></a></label>
<label style="margin-right:5px; float:right;" ></label>
</div><br/>
   <div id="tbl">
  <table width="100%" border="1" cellpadding="0" cellspacing="0" style="font-family:helvetica;text-align:center" id="dataTable" >
  
    <tr style="">
      <td style="width:200px; font-family:helvetica;font-weight: bold;">Date Range</td>
      <td style="width:50px;font-weight: bold;">Symbol</td>
       <td style="width:50px; font-family:helvetica;font-weight: bold;">Brok.Type</td>
      <td style="width:50px;font-weight: bold;">Method</td>
       <td style="width:50px; font-family:helvetica;font-weight: bold;">Fixed.Brok</td>
      <td style="width:50px;font-weight: bold;">Minimum</td>
       <td style="width:50px; font-family:helvetica;font-weight: bold;">Exp.Brok.</td>
      <td style="width:50px;font-weight: bold;">Side Flag</td>
    </tr>
    <tr>
      <td id="range" name="range"></td>
      <td id="sym" name="sym"></td>
      <td id="btype" name="btype"></td>
      <td id="method" name="method"></td>
      <td id="fixb" name="fixb"></td>
      <td id="min" name="min"></td>
      <td id="expb" name="expb"></td>
      <td id="sidef" name="sidef"></td>
     
    </tr>
  </table></div>
     </div>
  
            
                    
  </div>   
	<div id="editor"></div>    
    <div class="clear"></div>
    </div> 
  <%@ include file="footer.jsp" %>			
</body>
</html>